<template>
  <div
    :class="prefixCls"
    class="relative h-[100%] w-full"
  >
    <!-- 背景层 -->
    <div class="login-bg absolute w-full h-full"></div>
    
    <!-- 内容层 -->
    <div class="relative w-full h-full flex items-center justify-center p-20px">
      <!-- 左上角 Logo 和标题 -->
      <div class="absolute left-30px top-30px z-10 flex items-center">
        <img alt="" class="mr-10px h-48px w-48px" src="@/assets/imgs/logo.png" />
        <span class="text-24px font-bold text-white">{{ underlineToHump(appStore.getTitle) }}</span>
      </div>

      <!-- 右上角语言选择 -->
      <div class="absolute top-30px right-30px z-10">
        <LocaleDropdown class="text-white" />
      </div>

      <!-- 中间的登录表单 -->
      <div class="w-[420px] max-w-90vw">
        <!-- 登录表单容器 -->
        <div class="glassmorphism rounded-lg p-30px">
          <Transition appear enter-active-class="animate__animated animate__fadeIn">
            <component 
              :is="activeForm" 
              class="login-form-center" 
            />
          </Transition>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, unref } from 'vue'
import { underlineToHump } from '@/utils'
import { useDesign } from '@/hooks/web/useDesign'
import { useAppStore } from '@/store/modules/app'
import { LocaleDropdown } from '@/layout/components/LocaleDropdown'
import { LoginForm, MobileForm, QrCodeForm, RegisterForm, SSOLoginVue, ForgetPasswordForm } from './components'
import { LoginStateEnum, useLoginState } from './components/useLogin'

defineOptions({ name: 'Login' })

const { t } = useI18n()
const appStore = useAppStore()
const { getPrefixCls } = useDesign()
const prefixCls = getPrefixCls('login')

// 使用统一的登录状态管理
const { getLoginState } = useLoginState()

// 根据登录状态获取当前应该显示的组件
const activeForm = computed(() => {
  const state = unref(getLoginState)
  switch (state) {
    case LoginStateEnum.LOGIN:
      return LoginForm
    case LoginStateEnum.MOBILE:
      return MobileForm
    case LoginStateEnum.QR_CODE:
      return QrCodeForm
    case LoginStateEnum.REGISTER:
      return RegisterForm
    case LoginStateEnum.SSO:
      return SSOLoginVue
    case LoginStateEnum.RESET_PASSWORD:
      return ForgetPasswordForm
    default:
      return LoginForm
  }
})

// 暴露方法给子组件使用
defineExpose({
  activeForm
})
</script>

<style lang="scss" scoped>
$prefix-cls: #{$namespace}-login;

.#{$prefix-cls} {
  overflow: auto;
}

.login-bg {
  background-image: url('@/assets/svgs/bgtupian.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(153, 176, 68, 0.5) 0%, rgba(63, 114, 118, 0.5) 100%);
  }
}

.glassmorphism {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
}

.login-form-center {
  width: 100%;
}
</style>

<style lang="scss">
// 修改表单样式
.login-form {
  .el-input__wrapper {
    background: rgba(255, 255, 255, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: none !important;
    backdrop-filter: blur(5px);
    transition: all 0.3s ease;
    
    .el-input__inner {
      color: #fff !important;
      &::placeholder {
        color: rgba(255, 255, 255, 0.7);
      }
    }
    
    &:hover, &:focus {
      border-color: rgba(255, 255, 255, 0.5) !important;
      background: rgba(198, 215, 17, 0.25) !important;
    }
  }

  .el-button--primary {
    background: rgba(219, 213, 123, 0.9) !important;
    border-color: transparent !important;
    backdrop-filter: blur(5px);
    
    &:hover {
      background: rgb(255, 234, 6) !important;
    }
  }

  .el-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  .el-divider__text {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.9) !important;
  }

  // 链接文字颜色
  .el-link {
    color: rgba(255, 255, 255, 0.9) !important;
    
    &:hover {
      color: #fff !important;
    }
  }

  // 文本颜色
  .el-form-item__label,
  .el-checkbox__label {
    color: rgba(255, 255, 255, 0.9) !important;
  }

  // 复选框样式
  .el-checkbox__input.is-checked .el-checkbox__inner {
    background-color: #2ba6e3 !important;
    border-color: #2B8AE3 !important;
  }
}

// 暗色模式适配
.dark .login-form {
  .el-input__wrapper {
    background: rgba(0, 0, 0, 0.3) !important;
  }

  .el-button--primary {
    background: rgba(43, 138, 227, 0.8) !important;
  }
}
</style>